<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<u-radio-group v-model="active" placement="column">
			<view class="card" v-for="item in list" :key="item.key">
				<view class="hd fboxRow Ycenter">
					<view class="flex1 font-weight font32 color-main">{{ item.tit }}</view>
					<view class="more fboxRow Ycenter font24 color-969699" v-if="item.more">
						{{ item.more }}
						<u-icon color="#969699" size="12" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="bd fboxWrap">
					<view
						class="item"
						v-for="(style, index) in detail[item.key]"
						:key="index"
						@click="itemTap(style)"
					>
						<view
							class="item-box bwfont"
							:class="{ 'item-border': active == style[item.type] ? true : false }"
						>
							<!-- <view class="radio"><u-radio @change="itemTap(style)" :name="style[item.type]"></u-radio></view> -->
							<image
								class="pic"
								:src="style.styleThumbnail || style.companyStyleUrl"
								mode="aspectFill"
							></image>
						</view>
						<view class="tit font-ell1 font28 color-0F0400">
							{{ style.styleName || style.companyName }}
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>
		<view class="fixed-space"></view>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
		<!-- <view class="fixed-bottom fboxRow Ycenter Xcenter bg-base">
			<view class="fixed-btn flex1 fboxRow Ycenter Xcenter font28 color-FFF bg-main" @click="verifyTap">保存</view>
		</view> -->
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { getCardStyle, getCardDetail, putCardStyleUpdate } from '@/api/card.js';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			active: '',
			list: [
				{ tit: '个人', key: 'memberCardThemes', type: 'styleId' },
				// { tit: '数字人', key: 'persons', type: 'styleId' },
				{ tit: '企业', key: 'orgCardThemes', type: 'companyId' }
				// { tit: '企业', key: 'email', },
			],
			detail: {},
			type: 'styleId',
			typeObj: {}
		};
	},
	onLoad(option) {
		if (option) {
			this.typeObj.organisationId = option.organisationId;
			this.typeObj.styleId = option.styleId;
		}

		// this.typeObj = JSON.parse(JSON.parse(option.query).obj);
	},
	onShow() {
		this.getInit();
	},
	methods: {
		async getInit() {
			getCardStyle().then((res) => {
				this.detail = res.data;
			});
			this.active = this.typeObj.organisationId || this.typeObj.styleId;
		},
		changeData(val) {
			console.log(val);
		},
		itemTap(style) {
			console.log(style);
			this.active = style.styleId || style.companyId;
			if (style.styleId) {
				this.type = 'styleId';
			} else {
				this.type = 'organisationId';
			}
		},
		verifyTap() {
			uni.showLoading({
				title: '保存中...',
				icon: 'none'
			});
			putCardStyleUpdate({ [this.type]: this.active })
				.then((res) => {
					if (res.data) {
						// let pages = getCurrentPages(); // 当前页面
						// let beforePage = pages[pages.length - 2]; // 前一个页面
						// uni.navigateBack({
						// 	success: function() {
						// 		beforePage.$vm.getInit(); // 执行前一个页面的刷新
						// 	}
						// })
						uni.navigateBack();
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
}
.card {
	padding: 0 0 4rpx 40rpx;
}
.card .hd {
	padding-right: 40rpx;
	height: 92rpx;
}
.card .item {
	position: relative;
	margin: 0 16rpx 16rpx 0;
	width: 331rpx;
	// background: #ffffff;
	// border: 2px solid #f7f8ff;

	overflow: hidden;
}
.item .item-box {
	padding: 18rpx;
	background: #ffffff;
	border-radius: 12rpx;
	border: 1px solid transparent;
}
.item-border {
	border: 1px solid #cc9870 !important;
	position: relative;
	&::after {
		content: '\e668';
		// color: #CC9870;
		position: absolute;
		bottom: -1rpx;
		right: -1rpx;
		font-size: 50rpx;
		z-index: 3;
		background: linear-gradient(360deg, #ad7b54 0%, #d8a37a 100%);
		-webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent; /*给文字设置成透明*/
	}
}
.card .pic {
	position: relative;
	z-index: 1;
	// width: 327rpx;
	width: 100%;
	height: 440rpx;
	background: #969699;
	border-radius: 12rpx;
	overflow: hidden;
}
.card .tit {
	padding: 0 20rpx;
	height: 87rpx;
	line-height: 87rpx;
	overflow: hidden;
	text-align: center;
}
.card .radio {
	position: absolute;
	right: 6rpx;
	top: 18rpx;
	z-index: 3;
}
</style>
